/**
 *    这篇规范定义了以编程的方式改变文档可见性的方法。
 *    Page Visibility API 定义了以编程的方式改变最高层级浏览器上下文可见性的方法，并且在改变时发出通知。
 * 在不知道页面可见性时，网页设计者总是以“可见”状态设计页面。这导致更高的及其资源占用率，也让开发者无法根据页面可见性进行运行设计。
 * 在知道页面可见性的情况下，可以提高用户体验且开销更小。
 */

// 下面是几个简单示例
/**
 * 1.页面显示时自动播放一个视频，隐藏时暂停
 */
function awareVideoPlayback () {
  var video = document.getElementById('video');
  /**
   * Chrome 在18年4月版本增加了视频的 aotuplay 策略，禁止视频自动播放，包括脚本化的自动播放
   * Chrome 自动播放的策略比较简单总结起来如下：
   *    1.muted autoplay 始终允许，即静音可自动播放（音视频均可）
   *    2.针对音频，仅在下面几种情况下可以自动播放
   *        a).有用户行为发生（click/tap 等）
   *        b).对于桌面程序，已经提前播放了音频
   *        c).对于移动端用户将音频网址 home screen
   */
  if(document.visibilityState === 'visible') {
    video.play();
  }

  // 视频播放处理函数
  function handleVideoPlay () {
    console.log('play' + new Date().getTime())
  }

  // 视频暂停处理函数
  function handleVideoPause () {
    console.log('pause' + new Date().getTime())
  }

  // 页面可见性变化处理函数
  function handleVisibilityChange () {
    if(document.visibilityState === 'hidden') {
      video.pause();
    } else {
      video.play();
    }
  }

  // 监听视频状态变化
  video.addEventListener('play', handleVideoPlay, false);
  video.addEventListener('pause', handleVideoPause, false);
  // 监听可见性变化事件
  document.addEventListener('visibilitychange', handleVisibilityChange, false);
}

awareVideoPlayback();

/**
 * 浏览器顶层上下文的 document 对象具有以下可见性状态值其中之一：
 * menu VisibilityState {
 *    hidden: 隐藏
 *    visible: 显示
 * }
 * 
 * Page Visibility API 扩展了 Document 接口 {
 *    hidden: {boolean} 页面是否已经隐藏
 *    visibilityState: {menu VisibilityState} 枚举，文档当前可见性
 *    onvisibilitychange {event} 可见性改变事件
 * }
 */